const path = require('path');
function resolve(dir) {
  return path.join(__dirname, dir);
}

// 引入等比适配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 16
})

module.exports = {
  publicPath: '/', // 部署应用时的基本 URL
  assetsDir: 'static', //指定你的css/js/img/fonts等静态资源文件夹的打包生成路径
  productionSourceMap: false, // 打包去掉soucemap文件
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'stylus',
      patterns: [
        // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
        path.resolve(__dirname, './src/assets/style/base.styl')
      ]
    }
  },
  chainWebpack(config) {
    // set svg-sprite-loader
    // 第一步：让其他svg loader不要对src/assets/icons/svg进行操作
    config.module
      .rule("svg")
      .exclude.add(resolve("src/assets/icons/svg"))
      .end();
    // 第二步：使用svg-sprite-loader 对 src/assets/icons/svg下的svg进行操作
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/assets/icons/svg"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      //定义规则 使用时 <svg class="icon"> <use xlink:href="#icon-svg文件名"></use>  </svg>
      .options({
        symbolId: "icon-[name]"
      })
      .end();

      // script-loader
      config.module
			.rule('script-loader')
			.test('/\.exec\.js$/')
			.use('script-loader')
				.loader('script-loader')
				.end();
  },

  // 跨域
  devServer: {
    // host: '', //设置本地服务器   选填
    // port: '', //设置本地默认端口  选填
    // proxy: { //设置代理，必须填
    //   '/api': { //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
    //     target: 'http://release.nvisual.com:7080', //代理的目标地址
    //     changeOrigin: true, //是否设置同源，输入是的
    //     pathRewrite: { //路径重写
    //       '/api': '/', //路径转发代理 /api 的意思就是 用/api 代替http:localhost：8080
    //     }
    //   }
    // },
    open:true
  }
}